import { StyleBase } from "./style-base.model";
import { CommonUtil } from "../../util/common-util";
import { BoxService } from "../service/box.service";

const canvasPadding = 10;
export class Operation {
    style: StyleBase;
    oldStyle: StyleBase;
    oldPlace: {};
    boxService: BoxService = BoxService.getService();
    hasCanvas: boolean = false;
    ctx: CanvasRenderingContext2D;
    padding: number = canvasPadding;
    canvasStyle: StyleBase = {
        left: -canvasPadding + "px",
        top: -canvasPadding + "px"
    };
    canvasMove(e) { }
    move(e) {
        let change = this.getChange(e);
        for (let i in change) {
            this.style[i] = change[i];
        }
    }
    getMovement(e) {
        return {
            x: e.clientX - this.oldPlace["x"],
            y: e.clientY - this.oldPlace["y"]
        }
    }
    getMoveResult(data) {
        return {
            left: CommonUtil.px2num(this.oldStyle.left) + data["x"] + "px",
            top: CommonUtil.px2num(this.oldStyle.top) + data["y"] + "px"
        }
    }
    getChange(e) {
        let data = this.getMovement(e);
        return this.getMoveResult(data);
    }
    in() { }
    out() { }
    select(e) {
        this.start(e);
    }
    start(e) {
        this.oldStyle = JSON.parse(JSON.stringify(this.style));
        this.oldPlace = {
            x: e.clientX,
            y: e.clientY
        }
    }
    finish() { }
    setCanvasPadding(points) {
        for (let point of points) {
            point.left += this.padding;
            point.top += this.padding;
        }
    }
    render() { }
    paint(padding?: number) {
        if (padding != null) {
            this.padding = padding;
        }
        let canvasEl: HTMLCanvasElement = this.ctx.canvas;
        canvasEl.width = this.getWidth() + this.padding * 2;
        canvasEl.height = this.getHeight() + this.padding * 2;
        this.canvasStyle.width = canvasEl.width + "px";
        this.canvasStyle.height = canvasEl.height + "px";

        let center = {
            x: canvasEl.width / 2,
            y: canvasEl.height / 2
        }
        this.ctx.translate(center.x, center.y);
        this.ctx.rotate(this.style.deg);
        this.ctx.translate(-center.x, -center.y);
    }
    getWidth() {
        return CommonUtil.px2num(this.style.width);
    }
    getHeight() {
        return CommonUtil.px2num(this.style.height);
    }
    constructor() {
    }
}